<template>
    <div>
      <el-row :gutter="10">
       <el-col :span="6">
         <el-link type="primary" icon="el-icon-edit-outline" @click="addTribe">添加部落</el-link>
       </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 20px">
       <el-col :span="6">
         <el-input placeholder="请输入部落名称" v-model="name"></el-input>
       </el-col>
        <el-col :span="6">
          <el-button type="success" @click="paging(1)">查询</el-button>
          <el-button type="info" @click="clear">重置</el-button>
        </el-col>
      </el-row>
      <!--列表-->
      <el-table
        :data="page.list"
        style="width: 100%;margin-top: 20px;">
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="produce"
          label="简介">
        </el-table-column>




        <el-table-column
            header-align="center"
            align="center"
            label="照片"
            width="200">

          <template slot-scope="scope">
            <img :src="scope.row.photopath" width="100">

          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-link circle type="warning" icon="el-icon-edit" @click="update(scope.row)">编辑</el-link>
            <el-link circle  type="danger" icon="el-icon-delete" @click="del(scope.row.id)">解散</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="page.pageNum"
        :page-sizes="[2, 3, 4, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>

      <!--添加部落-->
      <el-dialog title="添加部落" :visible.sync="dialogFormVisible" @close="reset">
        <el-form :model="form">
          <el-form-item label="上传部落头像" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleChange"
              :on-remove="handleRemove"
              multiple
              :limit="1"
              :show-file-list="true"
              list-type="picture-card"
              :file-list="fileList">
              <!--<el-button size="small" type="primary">点击上传</el-button>-->
              <i class="el-icon-plus"></i>
              <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>


          <el-form-item label="部落名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="部落简介" :label-width="formLabelWidth">
            <el-input v-model="form.produce" auto-complete="off" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="saveAdd">确 定</el-button>
        </div>
      </el-dialog>

      <!--编辑部落-->
      <el-dialog title="编辑部落" :visible.sync="dialogFormVisible2" @close="reset">
        <el-form :model="form">
          <el-form-item label="上传部落头像" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              action=""
              :auto-upload="false"
              :on-change="handleChange"
              :on-remove="handleRemove"
              multiple
              :limit="1"
              :show-file-list="true"
              list-type="picture-card"
              :file-list="fileList">
              <!--<el-button size="small" type="primary">点击上传</el-button>-->
              <i class="el-icon-plus"></i>
              <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="部落名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="部落简介" :label-width="formLabelWidth">
            <el-input v-model="form.produce" auto-complete="off" type="textarea"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="saveupdate">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Tribe",
      data(){
          return{
            form:{},
            dialogFormVisible:false,
            dialogFormVisible2:false,
            formLabelWidth:"100px",
            fileList:[],
            universityList:[],
            labelList:[],
            state:'',
            userList: [],//查询学生信息
            // studentList:[],
            loadAll:{},
            userId:'',
            pageSize:10,
            name:'',
            labelId:'',
            universityId:'',
            page:{},
            paths:[],
            selectedItem:{}

          }
      },
      computed: {

      },
      watch: {
        state: function(newVal) {
          if (newVal !== '') {
            this.handleSelect(this.selectedItem);
          }
        }
      },
      methods:{
        del(id){
          this.$confirm('你确认解散吗').then(()=>{
            this.$axios.post("tribe/del?id="+id).then(resp=>{
              if (resp.data.code==200){
                this.$message.success("成功解散该部落")
                this.paging(1)
              }else{
                this.$message.error(resp.data.message)
              }

            })
          })
        },
        update(row){
          this.form=row;

          console.log("this.form",this.form)
          this.fileList.push({"url":this.form.photopath})
          this.dialogFormVisible2=true

        },
        saveupdate(){

          var fd=new FormData()
          Object.keys(this.form).forEach(key=> {
              fd.append(key, this.form[key])

          })


          //userId 负责人不修改传递id


          //文件上传
          if (this.fileList.length > 0) {
            this.fileList.forEach(file=>{
              if(!file.raw && file.url.indexOf('blob')===-1){
                this.paths.push(file.url)
                // console.log("this.paths1",this.paths)
              }
              else {
                fd.append('photo',file.raw)
              }
            })

            // console.log("this.paths",this.paths)
            fd.append("paths",this.paths)
          }else {
            this.$alert("请上传图片")
            return
          }
          this.$axios.post('/tribe/update/',fd).then(resp=>{
            if (resp.data.code==200){
              this.$message.success("修改成功")
            }else{
              this.$message.error("修改失败")
            }
            this.reset()
          })

        },

        handleUniversityChange(){
          this.state=''
        },
        handleSizeChange(pageSize){
          this.pageSize=pageSize
          this.paging(1)
        },

        addTribe(){
          this.dialogFormVisible=true
        },
        saveAdd(){
          console.log(this.form)
          console.log(this.userId)
          console.log(this.fileList)
          var fd=new FormData()
          Object.keys(this.form).forEach(key=> {
            if (key != 'labelId'){
              fd.append(key, this.form[key])
            }
          })

          //文件上传
          if (this.fileList.length > 0) {
            this.fileList.forEach(file=>{
              fd.append('photo',file.raw)
            })
          }else {
            this.$alert("请上传图片")
            return
          }
          this.$axios.post('/tribe/add/',fd).then(resp=>{
            if (resp.data.code==200){
              this.$message.success("添加成功")
            }else{
              this.$message.error("添加失败")
            }
            this.reset()
            // this.paging(1)
          })


        },
        //重置
        clear(){
          this.name=''
          this.paging(1)
        },
        reset(){
          this.dialogFormVisible=false;
          this.dialogFormVisible2=false;
          this.form={}
          this.fileList=[]


          this.paging(1)

        },
        //选择的负责人
        handleSelect(item) {
          console.log("item", item);
          this.selectedItem = item;
          this.userId = item.id;
        },


        handleChange(file){
          // console.log(file);
          this.fileList.push(file)
          // this.fileList.push(this.uploadedPhotos)
          console.log('handleChange(file)',this.fileList)
        },

        handleRemove(file, fileList){
          // console.log(file)
          this.fileList=fileList;
          console.log('handleRemove(file,fileList)',this.fileList);
        },
        //



        paging(curPage){
          this.$axios.get("tribe/list?curPage="+curPage+"&pageSize="+this.pageSize+ "&name="+this.name).then(resp=>{
            this.page=resp.data
            console.log("this.page",this.page)
          })
        },



      },

      created() {
        this.paging(1)
      },

    }
</script>

<style>
  .my-autocomplete {}
  li {
    line-height: normal;
    padding: 7px;
  }

  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .addr {
    margin-left: 10px;
    font-size: 12px;
    color: #b4b4b4;
  }

  .highlighted .addr {
    color: #ddd;
  }





</style>
